<template>
	<view class="myInfo">
		<!-- <z-nav-bar>学员信息</z-nav-bar>
		公共组件-每个页面必须引入 -->
		<!--<public-module></public-module>-->
		<view class="forms">
			<uni-forms :modelValue="formData" :value="formData" ref="form" :rules="rules">
				<uni-forms-item label="姓名" name="studentName" required>
					<uni-easyinput type="text" v-model="formData.studentName" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="手机" name="cellNo" required>
					<uni-easyinput type="text" v-model="formData.cellNo" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item required label="QQ" name="qqNo" required>
					<uni-easyinput type="text" v-model="formData.qqNo" placeholder="请输入" />
				</uni-forms-item>
				<!-- <uni-forms-item required label="在读学校" name="schoolId">
					<view class="select" @click="onPageJump('school')">{{formData.schoolId}}
						<uni-icons type="arrowright" size="16"></uni-icons>
					</view>
				</uni-forms-item>
				 <uni-forms-item label="院系" name="collegeId">
					<view class="select" @click="onPageJump('major')">{{formData.collegeId}}
						<uni-icons type="arrowright" size="16"></uni-icons>
					</view>
				</uni-forms-item>
				<uni-forms-item label="专业" name="majorId">
					<view class="select" @click="onPageJump('profession')">{{formData.majorId}}
						<uni-icons type="arrowright" size="16"></uni-icons>
					</view>
				</uni-forms-item> -->
				<uni-forms-item label="在读院校" name="schoolId" required>
					<vvSelect v-model="formData.schoolId" @change="getCollegeOptions" placeholder="请选择" :list="schoolOptions" valueKey="schoolId"
						label="schoolName"></vvSelect>
				</uni-forms-item>
				<uni-forms-item label="在读院系" name="collegeId" required>
					<vvSelect ref="collegeId" v-model="formData.collegeId" @change="getMajorOptions" placeholder="请选择" :list="collegeOptions" valueKey="collegeId"
						label="collegeName"></vvSelect>
				</uni-forms-item>
				<uni-forms-item label="在读专业" name="majorId" required>
					<vvSelect ref="majorId" v-model="formData.majorId" placeholder="请选择" :list="majorOptions" valueKey="majorId"
						label="majorName"></vvSelect>
				</uni-forms-item>
				<!-- <uni-forms-item label="年级" name="grade">
					<view class="select" @click="onPageJump('grade')">{{formData.grade}}
						<uni-icons type="arrowright" size="16"></uni-icons>
					</view>
				</uni-forms-item> -->
				<uni-forms-item label="年级" name="grade" required>
					<vvSelect v-model="formData.grade" placeholder="请选择" :list="classYearOptions" 
						valueKey="dictValue" label="dictLabel"></vvSelect>
				</uni-forms-item>
				<uni-forms-item label="班级" name="classNo" required>
					<uni-easyinput type="text" v-model="formData.classNo" placeholder="请输入" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<button v-if="formData.studentType !== '3'" type="primary" form-type="submit" class="btn" @click="submitForm">保存</button>
	</view>
</template>

<script>
	import store from '@/store';
	import vvSelect from '@/components/vv-select/vv-select'
	import $http from '@/config/requestConfig'
	
	export default {
		components: {
			vvSelect
		},
		data() {
			let _this = this
			return {
				show: false,
				schoolOptions: [],
				collegeOptions: [],
				majorOptions: [],
				classYearOptions: [],
				formData: {
					studentName: '',
					stuId: '',
					QQ: '',
					schoolId: '',
					majorId: '',
					grade: '',
					collegeId: '',
					profession: '',
					class: '',
				},
				hobby: [{
					text: '足球',
					value: 0
				}, {
					text: '篮球',
					value: 1
				}, {
					text: '游泳',
					value: 2
				}],
				rules: {
					studentName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					cellNo: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号'
						},{
							validateFunction: async function(rule, value, data, callback) {
								let iphoneReg = /^1[0-9]{10}$/
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确，请重新填写')
								}
								let res = await _this.$api.common.checkStudentRegist(params)
								if(res.code == 200) {
									return true
								} else {
									return new Error('当前手机号已注册，请联系管理员')
								}
							}
						}]
					},
					qqNo: {
						rules: [{
							required: true,
							errorMessage: '请输入QQ号'
						},{
							validateFunction:function(rule, value, data, callback) {
								let iphoneReg = /^[1-9][0-9]{4,12}$/
								if (!iphoneReg.test(value)) {
									callback('请输入正确的QQ格式')
								}
								return true
							}
						}]
					},
					schoolId: {
						rules: [{
							required: true,
							errorMessage: '请选择在读院校'
						}]
					},
					collegeId: {
						rules: [{
							required: true,
							errorMessage: '请选择在读院系'
						}]
					},
					majorId: {
						rules: [{
							required: true,
							errorMessage: '请选择在读专业'
						}]
					},
					grade: {
						rules: [{
							required: true,
							errorMessage: '请选择年级'
						}]
					},
					classNo: {
						rules: [{
							required: true,
							errorMessage: '请输入班级'
						}]
					}
				}
			};
		},
		async onLoad() {
			this.$api.common.getDict("edu_class_year").then(res => {
				this.classYearOptions = res.data
			})
			let res = await this.$api.regist.getHSchools()
			this.schoolOptions = res.data
			let data = store.state.userDetail
			console.log(store.state.userDetail, 'store.state.userDetail')
			this.formData = JSON.parse(JSON.stringify(data))
			if(!this.formData) {
				// nvue页面读取不到vuex里面数据，将取缓存
				this.formData = uni.getStorageInfoSync("userDetail");
			}
			this.$nextTick(() => {
				this.formData.collegeId = data.collegeId
				this.$nextTick(() => {
					this.formData.majorId = data.majorId
				})
			})
			
			//console.log(JSON.stringify(this.formData))
		},
		onShow() {
		
		},
		onReady () {
			this.$refs.form.setRules(this.rules)
		},
		//方法
		methods: {
			onPageJump(url) {
				// console.log(type)
				uni.navigateTo({
					url: '/subpages/my/search?params=' + encodeURIComponent(JSON.stringify(this.formData))
				});
			},
			submitForm(form) {
				// 手动提交表单
				this.$refs.form.submit().then(async (data) => {
					console.log('表单返回得值：', data)
					let params = {
						accountId: this.$store.state.userInfo.accountId,
						eduStudent: {
							...this.formData,
							studentId: this.$store.state.userInfo.userId,}
					}
					let res = await	this.$api.my.refineBaseInfo(params)
					$http.get('/wx/auth/studentDetail/' + params.eduStudent.studentId).then(res => {
						//console.log(JSON.stringify(res))
						if(res.code === 200) {
							store.commit('setUserDetail', res.data);	
						}
					})
					let tipSrc = res.code === 200 ? '修改个人信息成功' : '修改个人信息失败';
					uni.showModal({
						title: '提示',
						content: tipSrc,
						confirmText: '知道了',
						showCancel: false,
						cancelColor: '#81B435',
						success: (res) => {
							uni.navigateBack({
								delta: 1
							})
						}
					});
				})
			},
			getCollegeOptions(schoolId) {
			// 不用再调这个俩接口，前面在school中已经拿到了学院、专业数据
			// 	this.$api.regist.getHColleges({schoolId: schoolId}).then(res => {
			// 		this.collegeOptions = res.data
			// 	})
				let deptId = null
				this.schoolOptions.forEach(school => {
					if(school.schoolId === schoolId) {
						deptId = school.deptId
						this.collegeOptions = school.eduHCollegesList
					}
				})
				
				// 学校变化时，先将招生老师清空
				this.formData.collegeId= ''
				this.formData.majorId = ''
				this.$refs.collegeId.checkItemByKey('')
				this.$refs.majorId.checkItemByKey('')
			 },
			 getMajorOptions(collegeId) {
			 // 不用再调这个俩接口，前面在school中已经拿到了学院、专业数据
		 // 	this.$api.regist.getHMajors({collegeId: collegeId}).then(res => {
		 // 		this.collegeOptions = res.data
		 // 	})
			this.collegeOptions.forEach(college => {
				if(college.collegeId === collegeId) {
					this.majorOptions = college.eduHMajorsList
				}
			})
			
		  },
		},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss">
	@import '@/style/mixin.scss';

	page {
		background-color: $uni-bg-color-grey;
	}

	.myInfo {
		position: relative;
		height: 100%;
		width: 100%;
		padding: 16px;
		box-sizing: border-box;
	}

	.forms {
		width: 686upx;
		margin: 0 auto;
		padding: 24px 16px;
		background: #FEFFFF;
		border-radius: 16px;

		/deep/ input {
			text-align: right;
			outline: none;
		}

		/deep/ .is-input-border {
			border: 0 !important;
		}

		.select {
			width: 100%;
			text-align: right;
			line-height: 72upx;
		}
	}

	.btn {
		background-color: $uni-theme-color;
		border-radius: 30px;
		margin-top: 36upx;
	}

	.screenfull {
		position: absolute;
		background: #fff;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 3;
	}
	/deep/.uni-forms-item__inner, .uni-forms-item__content {
		 line-height: 36px;
	}
	/deep/.vv-input__body, .uni-forms-item__content {
		 text-align: right;
	}
</style>
